@charset "utf-8";

@import "reset";
@import "common";

header{
    .title_img{
        >img{
            width: 100%;
        }
    }
}
.footer_frame{
    margin-top: 20px!important;
}
.cooperation_warp{
    padding-top: 35px;
    width: 91%;
    margin: 0 auto;
    .cooperation_top{
        .cooperation_top_l{
            width: 50%;
            float: left;
            border-right: 1px solid #4d4d4d;
            padding-right: 22px;
            >h2{
                font-size: 26px;
                color: #FFFFFF;
            }
            >div{
                padding: 12px 0;
                border-bottom: 1px solid #4d4d4d;
                border-top: 1px solid #4d4d4d;
                margin-top: 22px;
                >select{
                    float: left;
                    width: 224px;
                    height: 28px;
                    background: #000000;
                    color: #4d4d4d;
                    border: 1px solid #4d4d4d;
                }
                >form{
                    border: 1px solid #4d4d4d;
                    border-right: 0;
                    float: right;
                    >input{
                    &:nth-of-type(1){
                           width: 154px;
                           height: 24px; 
                           background: #000000;
                           color: #4d4d4d;
                           text-indent: 5px;
                           border: none;
    
                    
                    }
                    &:nth-of-type(2){
                           width: 66px;
                           height: 26px;
                           background: #0dafd2;
                           cursor: pointer;
                    }
                    }
                }
            }
            >ul{
                padding-top: 15px;
                >li{
                    margin-bottom: 10px;
                    background: #252525;
                    >div{
                        float: left;
                        margin-right: 22px;
                        width: 110px;
                        height: 100px;
                        vertical-align: middle;
                        overflow: hidden;
    
                        >img{
                            width: 100%;
                        }
                    }
                    >p{
                    &:nth-of-type(1){
                        margin-bottom: 35px;
                        >a{
                           font-size: 18px;
                           color: #FFFFFF; 
                        }
                    }
                    &:nth-of-type(2){
                        font-size: 12px;
                        color: #9f9f9f;
                        height: 40px;
                        line-height: 40px;
                        border-top: 1px solid #000000;
                        >span{
                            display: inline-block;
                            width: 99px;
                            margin-right: 26px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    }
                &::after{
                    content: "";
                    display: block;
                    clear: both;
                }
                }
            }
            >a{
                display: block;
                width: 85px;
                height: 23px;
                background: #0dafd2;
                color: #FFFFFF;
                font-size: 12px;
                text-align: center;
                line-height: 23px;
                float: right;
            &:hover{
                background-color: #099ab9;
            }
            }
        }
       .cooperation_top_r{
           margin-left: 25px;
           float: left;
           width: 47%;

           >div{
           &:nth-of-type(1){
               margin-bottom: 28px;
               line-height: 35px;
               text-align: right;
               >h3{
                  float: left;
                  font-size: 26px;
                  color: #FFFFFF; 
                
               }
               >a{
                   display: inline-block;
                   width: 117px;
                   height: 27px;
                   background: #0db0d2;
                   color: #FFFFFF;
                   text-align: center;
                   line-height: 27px;
                   vertical-align: middle;
               &:hover{
                   background-color:#099ab9;
               }
               }
           }
           &:nth-of-type(2){
           background: #FFFFFF;
           padding-left: 26px;
           padding-right: 26px;
           padding-bottom: 28px;
           padding-top: 31px;
           >h4{
               text-align: center;
               margin-bottom: 22px;
           }
           >div{
               width: 90%;
               height: 302px;
               vertical-align: middle;
               overflow: hidden;
               margin: 0 auto;
               >img{
                   width: 100%;
               }
           }
           >p{
               margin: 0 auto;
               line-height: 25px;
               font-size: 14px;
               color: #626262;
               margin-bottom: 26px;
               margin-top: 26px;

           }
           >ul{
               >li{
                   line-height: 24px;
                   font-size: 14px;
                   color: #636363;
               }
           }
           }
           }
           >p{
               background: #c8c8c8;
               font-size: 12px;
                color: #252525;
               padding: 10px 0;
                
                >span{
                display: inline-block;
                width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:nth-of-type(1){
                    margin-right: 26px;
                    margin-left: 12px;
                }
                }
           }
       }
    }
    .cooperation_middle{
        padding-bottom: 51px;
       >div{
            line-height: 23px;
            margin-top: 60px;
            background: #252525;
            margin-bottom: 8px;
            padding-left: 8px;
            padding: 17px 24px 17px 8px;
            >h3{
                font-size: 26px;
                color: #FFFFFF;
                float: left;
            }
            >p{
                float: left;
                width: 500px;
                font-size: 14px;
                color: #6c6c6c;
                margin-left: 63px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            >a{
                float: right;
                width: 85px;
                height: 22px;
                background: #0DAFD2;
                letter-spacing: 3px;
                color: white; 
                font-size: 12px;
                text-align: center;
            &:hover{
                   background-color:#099ab9;
               }
            }
        }
        >ul{
            display: flex;
            flex-wrap: wrap;
            justify-content:space-between;
            >li{
                position: relative;
                overflow: hidden;
                width: 32.8%;
                margin-bottom: 8px;
                >div{
                &:nth-of-type(1){
                    width: 100%;
                    height: 183px;
                    overflow: hidden;
                    vertical-align: middle;
                    >img{
                        width: 100%;
                    }
                }
                &:nth-of-type(2){
                    position: absolute;
                    width: 100%;
                    left: 0;
                    top: 0;
                    transform: translateX(101%);
                    transition: all 500ms ease;
                    >img{
                        width: 100%;
                    }
                    >a{
                        position: absolute;
                        left: 20px;
                        bottom: 10px;
                        color: #FFFFFF;
                        font-size: 16px;
                    &:hover{
                        color: red;
                    }
                    }
                }
                &:nth-of-type(3){
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;

                }
                }
            &:hover{
                >div{
                &:nth-of-type(2){
                    transform: translateX(0);
                    z-index: 5;
                }
                &:nth-of-type(3){
                    background: rgba(0,0,0,.7);
                }
                }
            }
            }
        }
        
    }
    .cooperation_bottom{
        line-height: 35px;
        text-align: right;
        border-top: 1px solid #4d4d4d;
        padding-top: 20px;
       >h3{
           font-size: 26px;
           color: #FFFFFF;
           float: left;
           margin-right: 44px;
       }
       >ul{
           float: left;
           >li{
               float: left;
               margin-right: 13px;
               >a{
                   font-size: 14px;
                   color: #747474;
               }
           &::after{
               content: "";
               display: inline-block;
               height: 15px;
               width: 1px;
               background:#747474;
               vertical-align: middle;
               margin-left: 13px;
           }
           }
       }
       >a{
           display: inline-block;
            width: 84px;
            height: 24px;
            line-height: 24px;
            background: #0DAFD2;
            color: white;
            font-size: 12px;
            text-align: center;
            vertical-align: middle;
            letter-spacing: 3px;
        &:hover{
                   background-color:#099ab9;
           }
       }
    }
}
